<template>
    <div class="main">
        <div class="filter-container">
            <el-input @keyup.enter.native="search" class="filter-item" placeholder="按套餐名称搜索" v-model="params.name" clearable></el-input>
            <el-input @keyup.enter.native="search" class="filter-item" placeholder="商品名称、商品款号" v-model="params.goodsName" clearable></el-input>
            <el-select @keyup.enter.native="search" class="filter-item" placeholder="套餐类型" v-model="params.type" clearable>
              <el-option :key="1" :value="1" label="固定模式"></el-option>
              <el-option :key="2" :value="2" label="自由组合模式"></el-option>
            </el-select>
            <div class="filter-item selectItem">
              上架状态:
              <el-select v-model="upShelf" placeholder="请选择">
                <el-option
                  v-for="item in upShelfList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="filter-item selectItem">
              售卖状态:
              <el-select v-model="sell" placeholder="请选择">
                <el-option
                  v-for="item in sellList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <router-link v-if="rightsButtons['add']" :to="{name: 'activityPackageAdd'}" class="filter-item fr">
                <el-button type="success" icon="el-icon-plus">新建</el-button>
            </router-link>
        </div>
        <div class="btn-block" v-if="rightsButtons['export']">
          <el-button type="primary" :loading="exportLoading" @click="exportExcel">导出</el-button>
        </div>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="ID" prop="packageId"></el-table-column>
            <el-table-column align="center" label="名称" prop="name">
                <template slot-scope="scope">
                    <a style="color: #409eff" target="_blank" :href="getUrl({id: scope.row.packageId, fromType: 3, goodsType: 2, activityId: '', packType: scope.row.type})">
                        {{scope.row.name}}
                    </a>
                </template>
            </el-table-column>
            <el-table-column align="center" label="套餐商品" prop="packageGoodsName" show-overflow-tooltip width="280"></el-table-column>
            <el-table-column align="center" label="类型" width="120">
                <template slot-scope="scope">
                    <span v-text="types[scope.row.type]"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="市场价" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.marketValue | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="销售价" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.price | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="VIP价" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.regionPrice | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="钻石价" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.diamondPrice | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="董事价" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.directorPrice | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="最高佣金" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.maximumCommission | money}}</span>
                </template>
            </el-table-column>
            <!--<el-table-column align="center" label="开始时间" width="170">
                <template slot-scope="scope">
                    <span>{{formatDate(scope.row.starttime, 'yyyy-MM-dd hh:mm:ss')}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="结束时间" width="170">
                <template slot-scope="scope">
                    <span>{{formatDate(scope.row.endtime, 'yyyy-MM-dd hh:mm:ss')}}</span>
                </template>
            </el-table-column>-->
            <!--<el-table-column align="center" label="是否启用" width="120">
                <template slot-scope="scope">
                    <el-switch
                        disabled
                        v-model="scope.row.isEnable"
                        @change="updateStatus(scope.row)"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>-->
            <el-table-column align="center" label="是否上架" width="120">
                <template slot-scope="scope">
                    <span v-text="scope.row.upshelf === 1 ? '是' : '否'"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否售卖" width="120">
                <template slot-scope="scope">
                    <span v-text="scope.row.isSell === 1 ? '是' : '否'"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="业务首次上架时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.firstUpSelfTime)}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="160" v-if="rightsButtons['view'] || rightsButtons['edit']">
                <template slot-scope="scope">
                    <router-link v-if="rightsButtons['view']" :to="{name: 'activityPackageView', params: {id: scope.row.id}, query: {pageType: 'view', packageId: scope.row.packageId}}">
                        <el-button type="success" size="mini" plain>查看</el-button>
                    </router-link>
                    <router-link v-if="rightsButtons['edit'] && scope.row.upshelf !== 1" :to="{name: 'activityPackageEdit', params: {id: scope.row.id}, query: {pageType: 'edit', packageId: scope.row.packageId}}">
                        <el-button type="primary" size="mini" plain>编辑</el-button>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" v-if="total > 0">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="pageSize" :total="total" layout="total, prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
    export default {
        name: 'activityPackage',
        data() {
            return {
              exportLoading: false,
                list: [],
                params: {
                    name: '',
                    goodsName: '',
                    type: ''
                },
                types: {
                    '1': '固定模式',
                    '2': '自由组合模式',
                },
                page: 1,
                pageSize: 20,
                total: 0,
                listLoading: false,
                btnDisabled: false,
                upShelf: null,
                upShelfList: [{
                  value: 1,
                  label: '是'
                }, {
                  value: 0,
                  label: '否'
                }, {
                  value: null,
                  label: '全部'
                }],
                sell: null,
                sellList: [{
                  value: 1,
                  label: '是'
                }, {
                  value: 0,
                  label: '否'
                }, {
                  value: null,
                  label: '全部'
                }],
            }
        },
        created() {
          if (this.$store.getters.cachedViews.length === 0) this.getList();
        },
        activated(){
            this.getList();
        },
        methods: {
          // 导出搜索结果
          exportExcel() {
            this.exportLoading = true
            this.request({
              url: "/bsnl-product/package/exportExcel",
              method: "post",
              data: {
                pageIndex: this.page,
                pageSize: this.pageSize,
                isPage: 1,
                name: this.params.name,
                goodsName: this.params.goodsName,
                type: this.params.type,
                sell: this.sell,
                upShelf: this.upShelf
              },
              responseType: 'blob'
            }).then(res => {
              let date = moment().format('YYYYMMDD/HHmmss').replace(/\//g, '_')
              let filename = `套餐${date}.xls`
              this.downloadFile(res, filename)
              this.exportLoading = false
              })
              .catch(err => {
                console.log(err)
                this.exportLoading = false
              });
          },
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-product/package/list',
                    method: 'post',
                    data: {
                        pageIndex: this.page,
                        pageSize: this.pageSize,
                        isPage: 1,
                        name: this.params.name,
                        goodsName: this.params.goodsName,
                        type: this.params.type,
                        sell: this.sell,
                        upShelf: this.upShelf
                    }
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.total = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
            },
            /*// 启用/禁用
            updateStatus(item) {
                // const {id, type, jumpId, sort, status} = item;
                // this.request({
                //     url: '/bsnl-activity/boutique/update',
                //     method: 'post',
                //     data: {
                //         id,
                //         type,
                //         jumpId,
                //         sort,
                //         status
                //     }
                // }).then(() => {
                //     this.$message.success(status == 1 ? '启用成功' : '禁用成功');
                // }).catch(err => {
                //     this.$message.error(err);
                // });
            },
            // 下架
            offShelves(id) {
                this.$confirm('确定下架该套餐?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.request({
                        url: '/bsnl-product/package/updateUpshelfStatus',
                        method: 'post',
                        data: {
                            id,
                            upshelf: 0
                        }
                    }).then(() => {
                        this.$message.success('下架成功');
                        this.getList();
                    }).catch(err => {
                        console.log(err)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },*/
            // 搜索
            search() {
                this.page = 1;
                this.getList();
            },
            // 切换分页
            handleCurrentChange(page) {
                this.page = page;
                this.getList();
            },
        }
    }
</script>

<style>
  .selectItem {
    display:inline-block;
    padding:0 10px;
  }

  .selectItem .el-input {
    width: 100px;
  }
</style>
